<template>
  <view class="craftsman-view">
    <view class="page-container">
      <view class="title container flex flex-middle flex-between">
        可选匠人
        <view
          class="flex flex-middle"
          @click="toMoreCraftsman"
          v-show="craftsList.length"
        >
          更多
          <u-icon name="arrow-right" size="12" color="#333" />
        </view>
      </view>

      <u-scroll-list
        indicatorWidth="30"
        indicatorBarWidth="10"
        indicatorActiveColor="#A9E1AB"
      >
        <view
          class="default-view text-center"
          v-if="!craftsmanLoad && !craftsList.length"
        >
          <image src="@/static/image/common/default.png" mode="widthFix" />
          <view>没有找到可用匠人，换个时间或匠人再试试吧</view>
        </view>
        <block v-else-if="!craftsmanLoad">
          <view
            v-for="(item, index) in craftsList"
            :key="index"
            class="item-container"
            @click="changeCraftsman(index)"
          >
            <view class="text-center">
              <image
                :src="item.avatar"
                mode="aspectFill"
                :class="{ active: index == craftsmanIndex }"
              />
              <view class="name">
                {{ item.name }}
              </view>
              <view class="score">
                <block v-if="item.score">
                  {{ `评分 ${item.score}` }}
                </block>
                <block v-else>暂无评分</block>
              </view>
              <view class="more">
                {{ `${item.distance}km 半年${item.serviceCount}` }}
              </view>
            </view>
          </view>
        </block>

        <!-- 骨架屏 -->
        <view class="skeleton-view" v-else>
          <u-skeleton rows="4" loading :title="false" />
        </view>
      </u-scroll-list>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    craftsmanIndex: {
      type: Number,
      default: 0,
    },
    changeCraftsman: {
      type: Function,
      default: () => {},
    },
    craftsmanLoad: {
      type: Boolean,
      default: false,
    },
    craftsList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    toMoreCraftsman: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

<style scoped lang="scss">
.default-view {
  width: 100%;
  font-size: 12px;
  color: #999;

  image {
    width: 140px;
  }
}

.skeleton-view {
  width: 100%;
  padding: 0 16px;
}

.craftsman-view {
  border-bottom: 10px solid #f6f6f6;

  .item-container {
    padding-left: 16px;

    .more {
      font-size: 11px;
      color: #9d9d9d;
      margin-top: 2px;
    }

    .score {
      font-size: 10px;
      color: #fa6503;
      margin-top: 2px;
    }

    .name {
      color: #222;
    }

    .active {
      border-color: #31bc4e !important;
    }

    image {
      width: 104px;
      height: 104px;
      border-radius: 10px;
      border: 1px solid #fff;
    }
  }

  .item-container:last-child {
    padding-right: 16px;
  }

  .container {
    padding: 0 16px;
  }

  .title {
    color: #383838;
    height: 40px;

    view {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>